<template>
  <div style="height: 100%">
    <!-- <dv-border-box-12 style="height: 100%" :class="'echarts_box'"> -->
    <div style="height: 100%" class="chart" ref="chart"></div>
    <!-- </dv-border-box-12> -->
    <!-- 全屏 -->
    <transition name="el-fade-in-linear">
      <dv-border-box-12
        :key="brder1Key"
        v-if="fullscreen"
        style="height: 100%"
        class="fixed_echarts"
      >
        <div style="height: 100%" class="chart" ref="chart"></div>
      </dv-border-box-12>
    </transition>
  </div>
</template>

<script>
import { mixinReszie } from "@/mixin/resize.js";

import { generateId } from "@/utils";
export default {
  mixins: [mixinReszie],

  props: {
    alarmStateList: {
      type: Array,
      default: () => []
    },
    activeName: {
      type: String,
      default: ""
    }
  },
  watch: {
    alarmStateList: {
      handler: function(newData, oldData) {
        if (this.activeName == "历史报警查询") {
          setTimeout(() => {
            this.init();
          }, 1000);
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      lineChart: null,
      fullscreen: false,
      brder1Key: generateId()
    };
  },

  methods: {
    init() {
      const that = this;
      var option = {
        title: {
          text: "报警走势图",
          x: "center",
          top: "0",
          textStyle: {
            color: "#fff",
            fontSize: 18,
            fontWeight: "400"
          }
        },
        color: ["#73A0FA", "#73DEB3", "#FFB761"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#fff"
            },
            lineStyle: {
              type: "dashed"
            }
          }
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "50",

          top: "38",
          containLabel: true
        },
        // legend: {
        //   padding: [14, 0, 0, 0],
        //   orient: "horizontal",
        //   //   icon: "rect",
        //   show: true,
        //   textStyle: {
        //     color: "#fff",
        //   },
        //   left: 20,
        //   top: 10,
        // },
        xAxis: {
          type: "category",
          data: this.alarmStateList
            .map(item =>
              this.$moment.utc(item.time).format("YYYY-MM-DD HH:mm:ss")
            )
            .filter(item => item),
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 12
            }
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",

          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        dataZoom: [
          {
            show: true,
            height: 15,
            xAxisIndex: [0],
            bottom: 30,
            start: 0,
            end: 100,
            handleSize: "110%"
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: "工艺超限",
            type: "line",
            smooth: true,
            data: this.alarmStateList.map(item => item.upLimitalarmCount)
          },
          {
            name: "设备故障",
            type: "line",
            smooth: true,
            data: this.alarmStateList.map(item => item.deviceWarmalarmCount)
          },
          {
            name: "通讯报警",
            type: "line",
            smooth: true,
            data: this.alarmStateList.map(item => item.comWarmalarmCount)
          }
        ]
      };

      this.$nextTick(() => {
        if (this.$refs.chart) {
          this.lineChart = this.$echarts.init(this.$refs.chart);
          this.lineChart.setOption(option);
        }
      });
    }
  },
  mounted() {
    // if (this.activeName == "历史报警查询") {
    //   this.init();
    // }
  }
};
</script>

<style scoped lang="scss">
.echarts_box {
  .chart {
    width: 100%;
    /* height: 260px; */
  }
}
.fixed_echarts {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100% !important;
  height: 100% !important;
  background: url(../../../../../assets/images/applicationCenter/app_bg.jpg)
    no-repeat 100%;
  background-size: cover;
}
</style>
